<template>
  <div class="singer">
    <!-- singer-top -->
    <div class="singer-top">
      <div class="singer-top-wrap">
        <h2 class="title">万千歌手 尽在眼前</h2>
        <div class="singer-top-desc">登录查看你的关注歌手</div>
        <button class="singer-top-login-btn">立即登录</button>
      </div>
    </div>

    <!-- singer-content -->
    <div class="main">
      <!-- singer-content-tag -->
      <div class="singer-content-tag" @click="conditionalSelectSinger">
        <div class="singer-tag-list">
          <a
            class="singer_content_tag_item singer_content_tag_item_select"
            :data-initial="-1"
          >
            全部
          </a>
          <a class="singer_content_tag_item" :data-initial="'a'">A</a>
          <a class="singer_content_tag_item" :data-initial="'b'">B</a>
          <a class="singer_content_tag_item" :data-initial="'c'">C</a>
          <a class="singer_content_tag_item" :data-initial="'d'">D</a>
          <a class="singer_content_tag_item" :data-initial="'e'">E</a>
          <a class="singer_content_tag_item" :data-initial="'f'">F</a>
          <a class="singer_content_tag_item" :data-initial="'g'">G</a>
          <a class="singer_content_tag_item" :data-initial="'h'">H</a>
          <a class="singer_content_tag_item" :data-initial="'i'">I</a>
          <a class="singer_content_tag_item" :data-initial="'j'">J</a>
          <a class="singer_content_tag_item" :data-initial="'k'">K</a>
          <a class="singer_content_tag_item" :data-initial="'l'">L</a>
          <a class="singer_content_tag_item" :data-initial="'m'">M</a>
          <a class="singer_content_tag_item" :data-initial="'n'">N</a>
          <a class="singer_content_tag_item" :data-initial="'o'">O</a>
          <a class="singer_content_tag_item" :data-initial="'p'">P</a>
          <a class="singer_content_tag_item" :data-initial="'q'">Q</a>
          <a class="singer_content_tag_item" :data-initial="'r'">R</a>
          <a class="singer_content_tag_item" :data-initial="'s'">S</a>
          <a class="singer_content_tag_item" :data-initial="'t'">T</a>
          <a class="singer_content_tag_item" :data-initial="'u'">U</a>
          <a class="singer_content_tag_item" :data-initial="'v'">V</a>
          <a class="singer_content_tag_item" :data-initial="'w'">W</a>
          <a class="singer_content_tag_item" :data-initial="'x'">X</a>
          <a class="singer_content_tag_item" :data-initial="'y'">Y</a>
          <a class="singer_content_tag_item" :data-initial="'z'">Z</a>
          <a class="singer_content_tag_item" :data-initial="0">#</a>
        </div>
        <div class="singer-tag-list">
          <a
            class="singer_content_tag_item singer_content_tag_item_select"
            :data-area="-1"
            >全部</a
          >
          <a class="singer_content_tag_item" :data-area="7">内地</a>
          <a class="singer_content_tag_item" :data-area="0">港台</a>
          <a class="singer_content_tag_item" :data-area="96">欧美</a>
          <a class="singer_content_tag_item" :data-area="8">日本</a>
          <a class="singer_content_tag_item" :data-area="16">韩国</a>
        </div>
        <div class="singer-tag-list">
          <a
            class="singer_content_tag_item singer_content_tag_item_select"
            :data-type="-1"
            >全部</a
          >
          <a class="singer_content_tag_item" :data-type="1">男</a>
          <a class="singer_content_tag_item" :data-type="2">女</a>
          <a class="singer_content_tag_item" :data-type="3">组合</a>
        </div>
        <div class="singer-tag-list">
          <a class="singer_content_tag_item">全部</a>
          <a class="singer_content_tag_item">流行</a>
          <a class="singer_content_tag_item">说唱</a>
          <a class="singer_content_tag_item">国风</a>
          <a class="singer_content_tag_item">摇滚</a>
          <a class="singer_content_tag_item">电子</a>
          <a class="singer_content_tag_item">民谣</a>
          <a class="singer_content_tag_item">R&B</a>
          <a class="singer_content_tag_item">民族乐</a>
          <a class="singer_content_tag_item">轻音乐</a>
          <a class="singer_content_tag_item">爵士</a>
          <a class="singer_content_tag_item">古典</a>
          <a class="singer_content_tag_item">乡村</a>
          <a class="singer_content_tag_item">蓝调</a>
        </div>
      </div>

      <!-- singer-content-list -->
      <div class="singer-content-list">
        <ul class="singer-list-list">
          <li
            class="singer-content-list-item"
            v-for="singerList in singerLists"
            :key="singerList.id"
          >
            <div class="singer-content-list-item-wrap">
              <a class="singer-content-cover" :title="singerList.name" href="#">
                <img
                  class="singer-content-list-pic"
                  loading="lazy"
                  :src="singerList.picUrl"
                  alt="singerList.name"
                  @click="gosingerdetail(singerList.id)"
                />
              </a>
              <h3 class="singer-content-list-title">
                <a href="#" @click="gosingerdetail(singerList.id)">{{
                  singerList.name
                }}</a>
              </h3>
            </div>
          </li>
          <!-- <li class="singer-content-list-item">
            <div class="singer-content-list-item-wrap">
              <a class="singer-content-cover" title="周杰伦" href="#">
                <img
                  class="singer-content-list-pic"
                  loading="lazy"
                  src="./images/2.jpg"
                  alt="周杰伦"
                />
              </a>
              <h3 class="singer-content-list-title">
                <a href="#">周杰伦</a>
              </h3>
            </div>
          </li> -->
        </ul>
      </div>

      <!-- singer-content-list-txt -->
      <ul class="singer-content-list-txt">
        <li
          class="singer-content-list-txt-item"
          v-for="singerList in singerLists"
          :key="singerList.id"
        >
          <a
            class="singer-content-list-txt-link"
            :title="singerList.name"
            href="#"
            @click="gosingerdetail(singerList.id)"
          >
            {{ singerList.name }}
          </a>
        </li>

        <!-- <li class="singer-content-list-txt-item">
          <a class="singer-content-list-txt-link" title="周深" href="#">周深</a>
        </li> -->
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  name: "Singer",
};
</script>

<script setup>
import { ref } from "vue";
import { onMounted } from "@vue/runtime-core";
import { useRouter } from "vue-router";
import { getSingerListApi } from "../../api/singer/singer";

const singerLists = ref([]);

const type = ref(-1);
const area = ref(-1);
const initial = ref(-1);

// 歌手id
const id = ref();

// 发请求获取歌手列表
const getSingerList = async () => {
  const res = await getSingerListApi({
    type: type.value,
    area: area.value,
    initial: initial.value,
  });

  singerLists.value = res.artists;
  // id.value = res.artists.id;
  // console.log(id);

  // console.log(res);
  // console.log("2222", singerLists._rawValue);
};

onMounted(getSingerList);

// 点击更改参数重新发请求获取歌手列表
const conditionalSelectSinger = async (e) => {
  // console.log(e.target);
  // console.log(e.target.dataset.type);

  const res = await getSingerListApi({
    type: e.target.dataset.type || type.value,
    area: e.target.dataset.area || type.value,
    initial: e.target.dataset.initial || initial.value,
  });

  // console.log("parent", e.target.parentElement);
  // 获得点击事件的父元素的子元素数组
  let childrenList = e.target.parentElement.children;

  //循环子元素数组,所有子元素className去掉singer_content_tag_item_select
  for (let i = 0; i < childrenList.length; i++) {
    childrenList[i].className = "singer_content_tag_item";
  }

  // 点击的子元素加上类名singer_content_tag_item singer_content_tag_item_select
  e.target.className = "singer_content_tag_item singer_content_tag_item_select";

  singerLists.value = res.artists;
};

const router = useRouter();
const gosingerdetail = (id) => {
  // console.log(id);
  router.push({ name: "SingerDetail", query: { id: id } });
};
</script>

<style scoped>
.singer {
  background-color: #fafafa;
}
.singer-top {
  background-image: url(./images/background-img.webp);
  /* background-color: #151515; */
  min-width: 1000px;
  height: 376px;
}

.singer-top-wrap {
  min-width: 900px;
  height: 174px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin: 0 50px;
  padding: 100px 0;
}

.title {
  width: 550px;
  height: 55px;
  font-size: 60px;
  color: #ffffff;
  margin: 0;
  font-weight: 340;
  /* margin-top: -20px; */
}
.singer-top-desc {
  margin-top: 30px;
  font-size: 25px;
  color: #ffffff;
}

.singer-top-login-btn {
  border: 1px solid #595959;
  background-color: transparent;
  color: #ffffff;
  font-size: 20px;
  padding: 10px 45px;
  margin-top: 20px;
}

.main {
  min-width: 900px;
  margin: 0 50px;
}

.singer-content-tag {
  background-color: #fbfbfd;
  padding: 34px 0 17px 40px;
  margin: 30px 0 20px;
}

.singer-tag-list {
  min-height: 45px;
}

.singer_content_tag_item {
  display: inline-block;
  height: 26px;
  line-height: 27px;
  padding: 0 8px;
  margin: 0 12px 14px 0;
  font-size: 14px;
}

.singer_content_tag_item_select,
.singer_content_tag_item_select:hover {
  background-color: #31c27c;
  color: #ffffff;
}

a {
  color: #000;
  cursor: pointer;
}

a:hover {
  color: #31c27c;
}

.singer-content-list {
  min-width: 900px;
  /* max-width: 1200px; */
  height: 510px;
  overflow: hidden;
  /* text-align: center; */
}

.singer-list-list {
  min-width: 920px;
  /* max-width: 1220px; */
  height: 530px;
  display: flex;
  flex-wrap: wrap;
  padding: 0;
  margin-right: -20px;
}

.singer-content-list-item {
  width: 20%;
  height: 245px;
  overflow: hidden;
}

.singer-content-list-item-wrap {
  min-width: 164px;
  height: 195px;
  overflow: hidden;
  margin-right: 20px;
  padding: 25px 0;
  background-color: #fbfbfd;
}

li {
  list-style: none;
}

.singer-content-cover,
.singer-content-list-pic {
  display: block;
  width: 140px;
  height: 140px;
  border-radius: 126px;
  overflow: hidden;
  margin-left: auto;
  margin-right: auto;
}

a,
a:hover {
  text-decoration: none;
}

a {
  color: #000;
  cursor: pointer;
  font-size: 16px;
  font-weight: 500;
}

.singer-content-list-title {
  margin-top: 20px;
  text-align: center;
}

.singer-content-list-txt {
  min-width: 920px;
  display: flex;
  flex-wrap: wrap;
  padding: 0;
  margin-right: -20px;
}

.singer-content-list-txt-item {
  width: 20%;
}

li {
  list-style: none;
}

.singer-content-list-txt-link {
  line-height: 36px;
  font-size: 14px;
}
</style>
